<template>
	<view class="content">
		<!-- 考研倒计时 -->
		<uni-section title="考研倒计时" type="line" padding>
			<uni-countdown :font-size="30" :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF" background-color="#007AFF" />
		</uni-section>
		<!-- todo 这里放永生图片 -->
		<image class="logo" src="/static/lys.png"></image>
		<view>
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">简介</uni-th>
					<uni-th align="center">语音</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>背时</uni-td>
					<uni-td><audio src="/static/beishi.aac" controls></audio></uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>哎之歌</uni-td>
					<uni-td><audio src="/static/ai.m4a" controls></audio></uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>鸡叫</uni-td>
					<uni-td><audio src="/static/jijiao.m4a" controls></audio></uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>琦娃呼生娃</uni-td>
					<uni-td><audio src="/static/qiqi.m4a" controls></audio></uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>恐怖叫声</uni-td>
					<uni-td><audio src="/static/kongbu.m4a" controls></audio></uni-td>
				</uni-tr>
			</uni-table>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			day: 0,
			hour: 0,
			minute: 0,
			second: 0
		};
	},
	onLoad() {
		// 获取当前时间
		var now = new Date();
		// 目标结束日期，以毫秒为单位
		var targetEndDate = new Date('2023-12-23 00:00:00').getTime();
		var startDate = now.getTime();
		// 时间差
		var timeDiff = targetEndDate - startDate;
		// 将时间转化天、小时、分钟、秒
		this.day = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
		this.hour = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		this.minute = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
		this.second = Math.floor((timeDiff % (1000 * 60)) / 1000);
	},
	methods: {}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 10rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
